.status-wrapper {
    overflow: hidden;
}

.status {
    display: inline-flex;
    white-space: nowrap;

    &__item {
        display: flex;
        align-items: center;
        margin-right: 8px;

        &--red {
            color: var(--red400);
        }

        &--gray {
            color: var(--gray700);
        }

        &--green {
            color: var(--green400);
        }

        &--orange {
            color: var(--orange400);
        }

        &_width60 {
            width: 60px;
        }

        &_centered {
            min-width: 30px;
            justify-content: center;
        }

        &:last-child {
            margin-right: 0;
        }

        & > div {
            cursor: default;
        }
    }

    &__label {
        margin-right: 6px;
    }

    &__icon {
        width: 16px;
        height: 16px;
    }

    &__badge {
        padding: 0 4px;
        min-width: 28px;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        border-radius: 4px;

        &--green {
            color: var(--white);
            background-color: var(--green400);
        }

        &--gray {
            color: var(--white);
            background-color: var(--gray400);
        }

        &--orange {
            color: var(--white);
            background-color: var(--orange400);
        }

        @media (prefers-color-scheme: dark) {
            color: var(--black);
        }

        &--transparent {
            color: var(--gray400);
            border: 1px solid var(--gray400);

            @media (prefers-color-scheme: dark) {
                color: var(--gray400);
            }
        }
    }
}

.light-mode {
    .status__badge {
        color: var(--white);

        &--transparent {
            color: var(--gray400);
        }
    }
}

.dark-mode {
    .status__badge {
        color: var(--black);

        &--transparent {
            color: var(--gray400);
        }
    }
}
